const state = {
	dragStartItem: null,
	selectComplex: null, // 选中组件信息
	selectComplexId: null, // 选中组件编码
	selectComplexList: [], // 多选组件
	complexData: localStorage.getItem('complex') ? JSON.parse(localStorage.getItem('complex')) : [], // 编辑器组件列表
	complexhotData: [], // 历史记录 ( 撤消、重做 ) 
	complexhotIndex: -1, // 历史记录索引
	// 右键菜单
	contextMenu: {
		show: false,
		left: 0,
		top: 0,
		z: 1024
	},
	// 组件属性分类
	group: [{
		title: '基础属性',
		key: 'basics',
	}, {
		title: '文本属性',
		key: 'text',
	},{
		title: '渐变配置',
		key: 'linear-gradient',
	},{
		title: '标题属性',
		key: 'title',
	},{
		title: '表头',
		key: 'header',
	}, {
		title: '表格',
		key: 'table',
	},{
		title: '图例',
		key: 'legend',
	}, {
		title: '坐标轴',
		key: 'axis',
	}, {
		title: '外观',
		key: 'model',
	}, {
		title: '其他',
		key: 'other',
	}],
	// 组件原始的宽高
	origin: null
}

const mutations = {
	SET_ORIGIN: (state, data) => {
		state.origin = data
	},
	DRAG_START: (state, data) => {
		state.dragStartItem = data
	},
	SAVE_COMPLEX: (state, data) => {
		state.complexData = data
	},
	CLEAR_COMPLEX: (state, data) => {
		state.complexData = [] // 清空元素组件
	},
	PUT_COMPLEX: (state, data) => {
		state.complexData.push(data)
	},
	DELE_COMPLEX: (state, index) => {
		state.complexData.splice(index, 1)
	},
	UPDATE_COMPLEX: (state, list) => {
		state.complexData = list;
	},
	COPY_COMPLEX: (state, data) => {
		state.complexData.push(data);
	},
	UPDATE_ATTR_COMPLEX: (state, index) => {
		state.complexData = data
	},
	SELECT_COMPLEX: (state, data) => {
		state.selectComplex = data
	},
	CHNAGE_MENU: (state, data) => {
		state.contextMenu = data
	},
	SET_COMPLEX_DATA: (state, data) => {
		if (state.selectComplex.config.hasOwnProperty("data")) {
			state.selectComplex.config.data['value'] = data
		}
	},
}

const actions = {
	// 右键菜单
	settingMenu({
		commit
	}, data) {
		commit('CHNAGE_MENU', data)
	},
	// 选中的组件
	selectComplex({
		commit
	}, data) {
		commit('SELECT_COMPLEX', data)
	},
	setComplexDataValue({ commit }, data) {
		commit('SET_COMPLEX_DATA', JSON.parse(data))
	},
	saveComplex({
		commit
	}, data) {
		localStorage.setItem('complex', JSON.stringify(data))
		commit('SAVE_COMPLEX', data)
	},
	// 清空画布
	clear({
		commit
	}, data) {
		localStorage.removeItem('complex')
		console.log(localStorage.getItem('complex'), '清空画布')
		commit('CLEAR_COMPLEX')
	},
	// 组件交互
	active({
		commit
	}, data) {
		const list = state.complexData
		console.log(list)
		const index = list.findIndex(item => {
			return item.id === data.bindId
		})

		if (index == -1) {
			return;
		}

		const complex = list[index]
		const attr = complex.config.attr
		complex.config.attr.map((item) => {
			if (item.key === data.reslut) {
				item.data = data.value
			}
			return item
		})
		list[index].cont = list[index].cont ? 0 : 1;
		localStorage.setItem('complex', JSON.stringify(list))
		commit('SAVE_COMPLEX', list)
	},
	// 拖拽组件到编辑器并释放组件
	putComplex({
		commit
	}, data) {
		// console.log(state.dragStartItem)
		const drag = JSON.parse(JSON.stringify(state.dragStartItem));
		const complex = {
			id: new Date().valueOf(),
			version: drag.item.version,
			count: 1,
			name: drag.item.name, // 组件名
			title: drag.item.title,
			lock: false, // 锁定
			hidden: false, // 隐藏
			flex: false, // 固定定位
			focused: false, // 是否选中
			w: drag.item.width,
			h: drag.item.height,
			x: data.x - drag.offset.x,
			y: data.y - drag.offset.y,
			z: 50,
			r: 0, // 旋转角度
			opacity: 1, // 透明度
			config: drag.item.config, // 组件属性
		};
		state.dragStartItem = null;
		commit('PUT_COMPLEX', complex);
	},
	// 删除组件
	deleComplex({
		commit
	}, data) {
		const list = state.complexData;
		const findIndex = list.findIndex((e) => {
			return e.id === data.id
		})
		if (findIndex > -1)
			commit('DELE_COMPLEX', findIndex)
	},
	// 复制组件
	copyComplex({
		commit
	}, data) {
		const complex = JSON.parse(JSON.stringify(data));
		// 修改复制组件的编码
		complex.id = new Date().valueOf();
		commit("COPY_COMPLEX", complex);
	},
	// 添加组件 （可通过导入配置表新增）
	addComplex({
		commit
	}, data) {
		const complex = JSON.parse(JSON.stringify(data));
		// 修改复制组件的编码
		complex.id = new Date().valueOf();
		commit("PUT_COMPLEX", complex);
	},
	// 修改组件
	updateComplex({
		commit
	}, data) {
		const list = state.complexData;
		const complex = JSON.parse(JSON.stringify(data));
		const findIndex = list.findIndex((e) => {
			return e.id === complex.id;
		});
		if (findIndex > -1) {
			list[findIndex] = complex
			commit("SAVE_COMPLEX", list);
		}
	},
	// 记录被拖拽组件信息和鼠标点击坐标 (缓存)
	setDrag({
		commit
	}, data) {
		commit('DRAG_START', data)
	},
	// 记录组件原始的宽高
	setOrigin({
		commit
	}, data) {
		commit('SET_ORIGIN', data)
	},
}

export default {
	namespaced: true,
	state,
	mutations,
	actions
}
